<template>
	<view class="register">
		<view class="title">欢迎注册</view>
		<div class="label">
			<text>用户名</text><input type="text" class="input" v-model="dataForm.userName" placeholder="请填写用户名" />
		</div>
		<div class="label">
			<text>昵称</text><input type="text" class="input" v-model="dataForm.nickName" placeholder="请填写用户名" />
		</div>
		<div class="label">
			<text>密码</text><input type="password" class="input" v-model="dataForm.password" placeholder="请填写密码" />
		</div>
		<div class="label">
			<text>确认密码</text><input type="password" class="input" v-model="dataForm.corfirmPassword" placeholder="请填写密码" />
		</div>
		<view class="nav-register">
			<navigator url="/pages/login/login">
				已有帐号?去登录
			</navigator>
		</view>
		<view class="agreement">
			<radio value="agree" :checked="isAgree" @click="onCheckChange" color="#07c25f" style="transform:scale(0.8)" ></radio>
			<text>我已阅读并同意
				<text class="protocol" @click.stop="onShowProtocol()">《用户协议》</text>
				和
				<text class="protocol" @click.stop="onShowPrivacy()">《隐私政策》</text>
			</text>
		</view>
		<button :class='isAgree?"btn-agree":"btn"' @click="submit">同意并继续</button>
		<!-- <uni-forms class="form" ref="form" :modelValue="dataForm" :rules="rules" validate-trigger="bind" label-width="80px">
			<uni-forms-item name="userName" label="用户名">
				<uni-easyinput type="text" v-model="dataForm.userName" placeholder="用户名" />
			</uni-forms-item>
			<uni-forms-item name="nickName" label="昵称">
				<uni-easyinput type="text" v-model="dataForm.nickName" placeholder="昵称" />
			</uni-forms-item>
			<uni-forms-item name="password" label="密码">
				<uni-easyinput type="password" v-model="dataForm.password" placeholder="密码" />
			</uni-forms-item>
			<uni-forms-item name="corfirmPassword" label="确认密码">
				<uni-easyinput type="password" v-model="dataForm.corfirmPassword" placeholder="确认密码" />
			</uni-forms-item>
			<view>
				<checkbox-group @change="onCheckChange">
					<checkbox value="agree" :checked="false">
						<text>我已阅读并同意
							<text class="protocol" @click="onShowProtocol()">《用户协议》</text>
							和
							<text class="protocol" @click="onShowPrivacy()">《隐私政策》</text>
						</text>
					</checkbox>
				</checkbox-group>
			</view>
			<button class="btn-submit" @click="submit" type="warn">注册并登录</button>
		</uni-forms> -->
	</view>
</template>

<script>
	import UNI_APP from '@/.env.js';

	export default {
		data() {
			return {
				isAgree: false,
				dataForm: {
					userName: '',
					nickName: '',
					password: '',
					corfirmPassword: ''
				},
				rules: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名',
						}]
					},
					nickName: {
						rules: [{
							required: true,
							errorMessage: '请输入昵称',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}]
					},
					corfirmPassword: {
						rules: [{
							required: true,
							errorMessage: '请输入确认密码',
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (data.password != value) {
									callback('两次密码输入不一致')
								}
								return true;
							}
						}]
					}
				}
			}
		},
		methods: {
			submit() {
				if (!this.isAgree) {
					uni.showToast({
						title: "请勾选同意用户协议",
						icon: "none"
					})
					return;
				}
				if (this.dataForm.corfirmPassword !== this.dataForm.password) {
					uni.showToast({
						title: "两次密码输入不一致",
						icon: "none"
					})
					return;
				}

				// this.$refs.form.validate().then(() => {
					this.$http({
						url: '/register',
						data: this.dataForm,
						method: 'POST'
					}).then(() => {
						uni.showToast({
							title: "注册成功,您已成为欢聊用户",
							icon: 'none'
						})
						this.login();
					})
				// })
			},
			onShowProtocol() {
				const linkUrl = encodeURIComponent(UNI_APP.PROTOCOL_URL);
				uni.navigateTo({
					url: '/pages/common/external-link?url=' + linkUrl
				});
			},
			onShowPrivacy() {
				const linkUrl = encodeURIComponent(UNI_APP.PRIVACY_URL);
				uni.navigateTo({
					url: '/pages/common/external-link?url=' + linkUrl
				});
			},
			onCheckChange(e) {
				this.isAgree = true
			},
			login() {
				const loginForm = {
					terminal: this.$enums.TERMINAL_TYPE.APP,
					userName: this.dataForm.userName,
					password: this.dataForm.password
				}
				this.$http({
					url: '/login',
					data: loginForm,
					method: 'POST'
				}).then((loginInfo) => {
					console.log("登录成功,自动跳转到聊天页面...")
					uni.setStorageSync("userName", loginForm.userName);
					uni.setStorageSync("password", loginForm.password);
					uni.setStorageSync("loginInfo", loginInfo);
					// 调用App.vue的初始化方法
					getApp().init()
					// 跳转到聊天页面   
					uni.switchTab({
						url: "/pages/chat/chat"
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.register {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding: 0 60rpx;

		.title {
			padding-top: 250rpx;
			padding-bottom: 50rpx;
			// color: $im-color-primary;
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
		}

		.label {
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
			line-height: 100rpx;
			align-items: center;
			border-bottom: 3rpx #f2f2f2 solid;

			input {
				width: 70%;
				.uni-input-placeholder {
					color: #b5b5b5;
				}
			}
		}

		>.label:nth-of-type(1) {
			margin-top: 100rpx;
			border-top: 3rpx #f2f2f2 solid;
		}


		.uni-forms {
			padding: 50rpx;
			flex: 1;

			.protocol {
				color: #007BFF;
			}

			.btn-submit {
				margin-top: 80rpx;
				border-radius: 50rpx;
			}
		}

		.nav-register {
			width: 180rpx;
			// color: $im-color-primary;
			color: #5b6e96;
			// font-size: $im-font-size-large;
			font-size: 24rpx;
			align-self: flex-end;
			margin: 20rpx 0rpx 100rpx 0;
		}

		.agreement {
			width: 80%;
			margin: 0 auto;
			text-align: center;
			color: #b6b6b6;

			radio {
				transform: scale(0.8)
			}

			.protocol {
				color: #5b6e96;
			}
		}

		.btn {
			margin-top: 50rpx;
			width: 300rpx;
			color: #d0d0d0;
		}

		.btn-agree {
			width: 300rpx;
			margin-top: 50rpx;
			color: #fff;
			background-color: #07bd5f;
		}
	}
</style>